<template>
  <div class="box">
    <div>
      <mt-cell>
        <b slot="title" class="tit">个人信息</b>
      </mt-cell>
      <mt-cell title="头像">
        <simple-cropper :initParam="uploadParam" :uploadHandle="uploadHandle" ref="cropper">
          <img :src="Data.avatar ? Data.avatar : '../../assets/user.png'" class="user" @click="upload">
        </simple-cropper>
      </mt-cell>
      <mt-cell title="用户名" :value="userInfo.userAccount" v-if="Data.userAccountUpdated==='1'"></mt-cell>
      <mt-cell title="用户名" :value="userInfo.userAccount" v-else to="/set/nickname" is-link ></mt-cell>
      <mt-cell title="性别" :value="userInfo.gender" to="/set/sex" is-link></mt-cell>
    </div>
    <div class="mt10">
      <mt-cell>
        <b slot="title" class="tit">帐户安全</b>
      </mt-cell>
      <mt-cell title="手机" :value="userInfo.phone" to="/set/mobile" is-link></mt-cell>
      <mt-cell title="邮箱" :value="userInfo.email" :to="userInfo.email?'/set/updateEmail':'/set/email'" is-link></mt-cell>
      <mt-cell title="登录密码" value="修改" to="/set/pwd" is-link></mt-cell>
    </div>
    <div class="btn">
      <mt-button @click.native="logout()" class="f14">退出登录</mt-button>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import * as api from '@/service/api'
import { mapState } from 'vuex'
import SimpleCropper from '@/components/SimpleCropper'
export default {
  components: {
    SimpleCropper
  },
  data () {
    // var data = this.$store.state.me.user
    return {
      uploadParam: {
        fileType: 'recruit',
        uploadURL: 'file/imgupload',
        scale: 4
      },
      Data: {}
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.me.user || {}
    })
  },
  mounted () {
    this.Data = Object.assign({}, this.userInfo)
  },
  methods: {
    upload () {
      this.$refs['cropper'].upload()
    },
    uploadHandle (m) {
      return new Promise(async (resolve, reject) => {
        var data = Object.assign({}, this.userInfo)
        data.avatar = m.data.src
        this.Data.avatar = data.avatar
        try {
          await api.modifyUserInfo(data)
          this.$store.dispatch('getUserInfo')
          Toast('图像修改成功')
          resolve()
        } catch (error) {
          reject(error)
          console.log(error)
        }
      })
    },
    async logout () {
      this.$store.dispatch('loginOut')
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding-top: 5px;
}
.user {
  margin: 10px 0;
  background: #fff;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 1px #eeeeee solid;
}
.mt10 {
  margin-top: 15px;
}
.tit {
  position: relative;
  padding-left: 18px;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: 6px;
    height: 30px;
    background: #ea2c0a;
  }
}
.btn {
  padding: 30px;
  .mint-button {
    width: 100%;
    background: #f15d43;
    color: #fff;
  }
}
</style>
